<script src="user.component.ts"></script>
<section class="listSection">
  <div class="listNav">
    权限管理>用户列表
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>查询条件</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form #userList="ngForm" (ngSubmit)="listMessage(userList.value)" class="form-inline" >
          <div class="row">
            <div class="form-group search-list">
              <label>用户登录名：</label>
              <input [(ngModel)]="loginName" name="loginName" type="text" class="form-control" placeholder="请输入登录名">
            </div>
            <div class="form-group search-list">
              <label>角 色：</label>
              <select [(ngModel)]="roleId" name="roleId" class="form-control selectStyle">
                <option value="">请选择角色</option>
                <option *ngFor="let role of roleList" [value]="role.roleId">{{role.roleName}}</option>
              </select>
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn" type="submit">查询</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label>用 户 状 态： </label>
              <select [(ngModel)]="userStatus" name="userStatus" class="form-control selectStyle">
                <option value="">请选择用户状态</option>
                <option [value]="0">正常</option>
                <option [value]="1">冻结</option>
                <option [value]="2">黑名单</option>
              </select>
            </div>
            <div class="form-group search-list">
            </div>
            <div class="form-group search-list search-list-btn ">
            <button class="btn selectButtonOfA reset-btn"  type="reset" >清除</button>
          </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>用户列表</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal" (click)="add()">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>登录名</th>
                <th>角色名</th>
                <th>用户状态</th>
                <th>创建时间</th>
                <th>修改时间</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let user of list">
                <td>{{user.loginName}}</td>
                <td>{{user.roleName}}</td>
                <td>
                  <span *ngIf="user.userStatus=='0'">正常</span>
                  <span *ngIf="user.userStatus=='1'">冻结</span>
                  <span *ngIf="user.userStatus=='2'">黑名单</span>
                </td>
                <td>{{user.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>{{user.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>
                  <span>
                      <img src="assets/icon/see.png" alt="查看">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(user)">查看</a>
                  </span>
                  <span>
                    <img src="assets/icon/edit.png" alt="编辑">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(user)">编辑</a>
                  </span>
                  <span>
                    <img src="assets/icon/delete.png" alt="删除">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="userMessage(user)">删除</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <page [pageParams]="{pageSize:pageSize,totalNum:totalNum,curPage:curPage,totalPage:totalPage}" (changeCurPage)="getPageData($event)"></page>
      </div>
    </div>
  </section>

  <!-- userMessage -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">用户详情</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>用户名：</td>
                  <td>{{queryMessage.loginName}}</td>
                </tr>
                <tr>
                  <td>角色名称：</td>
                  <td>{{queryMessage.roleName }}</td>
                </tr>
                <tr>
                  <td>关联企业：</td>
                  <td>{{queryMessage.polluterName }}</td>
                </tr>
                <tr>
                  <td>关联环保局：</td>
                  <td>{{queryMessage.epaName }}</td>
                </tr>
                <tr>
                  <td>用户头像：</td>
                  <td>{{queryMessage.userIcon }}</td>
                </tr>
                <tr>
                  <td>用户状态：</td>
                  <td>
                    <span *ngIf="queryMessage.userStatus=='0'">正常</span>
                    <span *ngIf="queryMessage.userStatus=='1'">冻结</span>
                    <span *ngIf="queryMessage.userStatus=='2'">黑名单</span>
                  </td>
                </tr>
                <tr>
                  <td>用户姓名：</td>
                  <td>{{queryMessage.userName}}</td>
                </tr>
                <tr>
                  <td>手机号:</td>
                  <td>{{queryMessage.msisdn}}</td>
                </tr>
                <tr>
                  <td>邮箱地址:</td>
                  <td>{{queryMessage.email}}</td>
                </tr>
                <tr>
                  <td>创建时间：</td>
                  <td>{{queryMessage.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                </tr>
                <tr>
                  <td>修改时间：</td>
                  <td>{{queryMessage.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group search-list-btn">
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- add -->
  <form #addUser="ngForm" (ngSubmit)="addMessage(addUser.value,addUser.valid)" novalidate>
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">新增用户</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                    <td><span class="red">*</span>用户登录名：</td>
                    <td><input [(ngModel)]="addMessages.userId" type="text" name="loginName" class="form-control"  required #loginNamess="ngModel" placeholder="请输入"></td>
                    <!--<td><div [hidden]="!addUser.form.hasError('required','loginName')" class="prompt">必填</div></td>-->
                </tr>
                <tr>
                  <td><span class="red">*</span>用户密码：</td>
                  <td><input [(ngModel)]="addMessages.password" type="password" class="form-control" name="password" required ></td>
                  <!--<td><div [hidden]="!addUser.form.hasError('required','password')" class="prompt">必填</div></td>-->
                </tr>
                <tr>
                  <td>用户头像：</td>
                  <td><input [(ngModel)]="addMessages.userIcon" type="text" class="form-control" name="userIcon"></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>用户状态：</td>
                  <td>
                    <select [(ngModel)]="addMessages.userStatus" name="userStatus" class="form-control selectStyle" required>
                      <option value="0">正常</option>
                      <option value="1">冻结</option>
                      <option value="2">黑名单</option>
                    </select>
                  </td>
                  <!--<td><div [hidden]="!addUser.form.hasError('required','userStatus')" class="prompt">必填</div></td>-->
                </tr>
                <tr>
                  <td><span class="red">*</span>关联角色：</td>
                  <td>
                    <select [(ngModel)]="addMessages.roleId" class="form-control selectStyle" name="roleId" required>
                      <option *ngFor="let role of roleList" [value]="role.roleId">{{role.roleName}}</option>
                    </select>
                  </td>
                  <!--<td><div [hidden]="!addUser.form.hasError('required','roleId')" class="prompt">必填</div></td>-->
                </tr>
                <tr>
                  <td>关联排污企业：</td>
                  <td>
                    <select [(ngModel)]="addMessages.polluterId" class="form-control selectStyle" name="polluterId">
                      <option *ngFor="let polluter of PolluterList" [value]="polluter.id">{{polluter.polluterName}}</option>
                    </select>
                  </td>
                  <!--<td><div>非系统管理员必填</div></td>-->
                </tr>
                <tr>
                  <td>关联环保局：</td>
                  <td>
                    <select [(ngModel)]="addMessages.epaId" class="form-control selectStyle" name="epaId">
                      <option *ngFor="let epa of EpaList" [value]="epa.id">{{epa.epaName}}</option>
                    </select>
                  </td>
                  <!--<td><div>非系统管理员必填</div></td>-->
                </tr>
                <tr>
                  <td>用户姓名：</td>
                  <td><input [(ngModel)]="addMessages.userName" type="text" class="form-control" name="userName"></td>
                </tr>
                <tr>
                  <td>手机号：</td>
                  <td><input [(ngModel)]="addMessages.msisdn" type="text" class="form-control" name="msisdn" placeholder="请输入13位手机号"></td>
                </tr>
                <tr>
                  <td>邮箱地址：</td>
                  <td><input [(ngModel)]="addMessages.email" type="email" class="form-control" name="email" pattern="[\w]+?@[\w]+?\.[a-z]+?"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn sumbit-btn" type="submit" [disabled]="!addUser.form.valid">提交</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- update -->
  <form #user="ngForm" (ngSubmit)="updateMessage(user.value,user.valid)">
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑用户</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <input type="text" [(ngModel)]="updateMessages.userId" class="form-control hidden" name="userId" value="{{updateMessages.userId}}" >
                <tr>
                  <td><span class="red">*</span>用户登录名：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.loginName" class="form-control" name="loginName" value="{{updateMessages.loginName}}"required></td>
                  <td><div [hidden]="!user.form.hasError('required','loginName')" class="prompt">必填</div></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>用户密码：</td>
                  <td><input type="password" [(ngModel)]="updateMessages.password" class="form-control" name="password" value="{{updateMessages.password}}" required></td>
                  <td><div [hidden]="!user.form.hasError('required','password')" class="prompt">必填</div></td>
                </tr>
                <tr>
                  <td>用户头像：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.userIcon" class="form-control" name="userIcon" value="{{updateMessages.userIcon}}"></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>用户状态:</td>
                  <td>
                    <select class="form-control selectStyle" name="userStatus" [(ngModel)]="updateMessages.userStatus" required>
                      <option value="0">正常</option>
                      <option value="1">冻结</option>
                      <option value="2">黑名单</option>
                    </select>
                  </td>
                  <td><div [hidden]="!user.form.hasError('required','userStatus')" class="prompt">必填</div></td>
                </tr>
                <tr>
                  <td>用户姓名：</td>
                  <td><input type="text" class="form-control" [(ngModel)]="updateMessages.userName" name="userInfo.userName" value="{{updateMessages.userInfo.userName}}"></td>
                </tr>
                <tr>
                  <td>手机号：</td>
                  <td><input type="text" class="form-control" [(ngModel)]="updateMessages.msisdn" name="msisdn" value="{{updateMessages.userInfo.msisdn}}"></td>
                </tr>
                <tr>
                  <td>邮箱地址：</td>
                  <td><input type="text" class="form-control" [(ngModel)]="updateMessages.email" name="email" value="{{updateMessages.userInfo.email}}"></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>关联角色：</td>
                  <td>
                    <select [(ngModel)]="updateMessages.roleId" class="form-control selectStyle" name="roleId" required>
                      <option *ngFor="let role of roleList" [value]="role.roleId" [selected]="role.roleId==updateMessages.roleId">{{role.roleName}}</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>关联排污企业：</td>
                  <td>
                    <select [(ngModel)]="updateMessages.polluterId" class="form-control selectStyle" name="polluterId">
                      <option value=""> </option>
                      <option *ngFor="let polluter of PolluterList" [value]="polluter.id" [selected]="polluter.id==updateMessages.polluterId">{{polluter.polluterName}}</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>关联环保局：</td>
                  <td>
                    <select [(ngModel)]="updateMessages.epaId" class="form-control selectStyle" name="epaId">
                      <option value=""> </option>
                      <option *ngFor="let epa of EpaList" [value]="epa.id" [selected]="epa.id==updateMessages.epaId">{{epa.epaName}}</option>
                    </select>
                  </td>
                </tr>
                <tr style="display: none">
                  <td>创建时间：</td>
                  <td>
                    <input type="text" class="form-control readonly" [(ngModel)]="updateMessages.createTime"  name="createTime" value="{{updateMessages.createTime}}">
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button  class="btn sumbit-btn" type="submit" [disabled]="!user.form.valid">提交</button>
          <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- delete -->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="deleteModalLabel">删除用户</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>是否删除该用户？</span>
            </div>
          </div>
        </div>
        <div class="modal-footer2 text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn" data-name="{{queryMessage.userId}}"  (click)="deleteById($event)">确定</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


